<template>

  <div class="TaskStatistics_container">
    <div class="TaskStatistics_container_header">
      <div class="header_name">任务统计</div>
      <!--      <div class="header_date">-->
      <!--        <div class="name">日期</div>-->
      <!--        <el-date-picker-->
      <!--          v-model="date"-->
      <!--          type="daterange"-->
      <!--          format="yyyy-MM-dd"-->
      <!--          value-format="yyyy-MM-dd"-->
      <!--          range-separator="至"-->
      <!--          start-placeholder="开始日期"-->
      <!--          end-placeholder="结束日期"-->
      <!--        />-->
      <!--      </div>-->
    </div>
    <div class="TaskStatistics_container_main">
      <div v-for="(item,index) in taskStatisticsItem" :key="index" class="main_item">
        <div class="main_item_header">{{ item.name }}</div>
        <div class="main_item_main">
          <div v-for="(item2,index2) in item.children" :key="index2" class="main_item_main_item">
            <div class="main_item_main_item_left">
              <div class="left_icon" :style="{backgroundColor:item2.bgColor}">
                <svg-icon :icon-class="item2.icon" :style="{color:item2.iconColor}" />
              </div>
            </div>
            <div class="main_item_main_item_right">
              <div class="right_top">{{ data[item.dataKey][item2.dataKey] }}</div>
              <div class="right_bottom">{{ item2.name }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>

import { deviceTaskStatistics } from '@/api/equipmentManage/equipmentReport/dataBoard'
export default {
  name: 'TaskStatistics',
  data() {
    return {
      taskStatisticsItem: [ // 可选的任务统计项
        {
          name: '点检任务',
          dataKey: 'checkTask',
          children: [
            {
              name: '完成率',
              icon: '完成率',
              iconColor: '#DE9A2F',
              bgColor: '#FFDE9D4D',
              dataKey: 'completedRatio'
            },
            {
              name: '异常任务数',
              icon: '异常任务数',
              iconColor: '#00DE99',
              bgColor: '#9DFFE04D',
              dataKey: 'abnormalTaskNumber'
            },
            {
              name: '异常占比',
              icon: '异常占比',
              iconColor: '#0084D4',
              bgColor: '#9DD9FF4D',
              dataKey: 'abnormalRatio'
            },
            {
              name: '工时（h）',
              icon: '工时',
              iconColor: '#E51C5F',
              bgColor: '#FFAECA4D',
              dataKey: 'cost'
            }
          ]
        },
        {
          name: '保养任务',
          dataKey: 'maintainTask',
          children: [
            {
              name: '完成率',
              icon: '完成率',
              iconColor: '#B200D8',
              bgColor: '#EE9DFF4D',
              dataKey: 'completedRatio'
            },
            {
              name: '及时率',
              icon: '及时率',
              iconColor: '#42CB05',
              bgColor: '#BDFF9D4D',
              dataKey: 'timelinessRatio'
            },
            {
              name: '消耗备件数',
              icon: '消耗备件数',
              iconColor: '#D77E00',
              bgColor: '#FFDE9D4D',
              dataKey: 'consumptionSpareNumber'
            },
            {
              name: '工时（h）',
              icon: '工时',
              iconColor: '#E51C5F',
              bgColor: '#FFAECA4D',
              dataKey: 'manHour'
            }
          ]
        },
        {
          name: '报修任务',
          dataKey: 'repairTask',
          children: [
            {
              name: '自修次数',
              icon: '自修次数',
              iconColor: '#D77E00',
              bgColor: '#FFAECA4D',
              dataKey: 'selfRepairNumber'
            },
            {
              name: '委外次数',
              icon: '委外次数',
              iconColor: '#0084D4',
              bgColor: '#9DD9FF4D',
              dataKey: 'outsourceNumber'
            },
            {
              name: '消耗备件数',
              icon: '消耗备件数',
              iconColor: '#3ABB00',
              bgColor: '#BDFF9D4D',
              dataKey: 'consumptionSpareNumber'
            },
            {
              name: '维修费用（元）',
              icon: '维修费用',
              iconColor: '#00DE99',
              bgColor: '#9DFFE04D',
              dataKey: 'costThousandths'

            }
          ]
        }
      ],
      data: {},
      date: []
    }
  },
  watch: {
    date() {
      this.getData()
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 获取顶部统计数据
    getData() {
      deviceTaskStatistics({ searchDate: this.date }).then(res => {
        this.data = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.TaskStatistics_container{
  width: 100%;
  height: 100%;
  .TaskStatistics_container_header{
    width: 100%;
    height: 50px;
    padding: 0px 20px;
    display: flex;justify-content: space-between;
    .header_name{
      height: 100%;
      display: flex;align-items: center;
      color: rgba(51, 51, 51, 1);
      font-size: 20px;
      font-weight: bold;
    }
    .header_date{
      height: 100%;
      display: flex;align-items: center;
      font-size: 14px;
      .name{
        padding-right: 20px;
      }
      /deep/ .el-date-editor{
        height: 30px;
      }
    }
  }

  .TaskStatistics_container_main{
    display: flex;
    height: 78%;
    .main_item{
      flex: 1;height: 100%;

      .main_item_header{
        display: flex;justify-content: center;align-items: center;
        font-size: 17px;color: #333333;
        height: 15%;
      }
      .main_item_main{
        padding: 0px 4.5%;
        width: 100%;height: 65%;
        display: flex;flex-wrap: wrap;justify-content: space-between;align-content: flex-start;
        margin-top: 10px;
        .main_item_main_item{
          margin-top: 4.4%;
          width: 50%;height: 40%;
          display: flex;
          .main_item_main_item_left{
            width: 40%;
            display: flex;justify-content: flex-start;align-items: center;
            padding-left: 10%;
            .left_icon{
              width: 30px;
              height: 30px;
              border-radius: 50%;
              background-color: rgba(255, 201, 201, 0.3);
              display: flex;justify-content: center;align-items: center;
              font-size: 16px;
            }
          }
          .main_item_main_item_right{
            width: 50%;height: 100%;
            .right_top{
              width: 100%;
              height: 50%;
              display: flex;justify-content: flex-start;align-items: center;
              font-size: 24px;color: #333333;
            }
            .right_bottom{
              min-width: 100px;
              width: 100%;
              height: 50%;
              display: flex;justify-content: flex-start;align-items: center;
              font-size: 12px;color: #999999;
            }
          }
        }
      }
    }
    .main_item:not(:last-child) .main_item_main{
      border-right: 1px solid rgba(151, 151, 151, 0.3);
    }
  }
}
</style>
